const $ = dom => document.querySelector(dom);
const getH = elm => parseInt(getComputedStyle(elm).height);
const main = $('main');
const slide = $('#slide');
const slideH =getH(slide);
const mOffsetTop = main.offsetTop;
let minus = (window.innerHeight-slideH)/2;
slide.style.top = -600 + mOffsetTop + 'px';

window.onresize = ()=>{
    minus = (window.innerHeight-slideH)/2;
    slide.style.top = -600 + mOffsetTop + 'px';
}
window.addEventListener('scroll',()=>{
    const scrollTop = document.documentElement.scrollTop;
    if(scrollTop>100){
        const top = scrollTop-mOffsetTop+minus;
        slide.style.top = top+'px';
    }
})


const $all = dom => document.querySelectorAll(dom);
const slideLi = $all('#slide ul li.control');
const box = $all('main .content');

let last = slideLi[0];
window.addEventListener('scroll',()=>{
    box.forEach((v,i)=>{
        let mH = getH(v) + v.offsetTop;
        let sH = document.documentElement.scrollTop;
        if(sH>v.offsetTop && sH<mH){
            last.classList.remove('on');
            slideLi[i].classList.add('on');
            last = slideLi[i];
        }
    });
})

$('#slide ul').addEventListener('click',function(e){
   
    let index = Array.prototype.indexOf.call(slideLi,e.target);
    
    let top = box[index].offsetTop + getH(box[index])/2;
    
    document.documentElement.scrollTo({top, behavior: "smooth" });
   
    
})


